<template>
  <div class="main-content">
   <div  class="login">
     <div  class="section-1">
       <img  src="../../Login/netease.png">
      </div>
      <div  class="title">{{$t('login.loginText')}}</div>
      <div  class="section-2">
        <div  class="input-box" v-show="flag">
          <div   :class="['container',{'classNameStyle1': classNameStyle1}]">
            <svg-icon icon-class="mobile" :class="['svg-icon',{'classNameStyle1': classNameStyle1}]"></svg-icon>
            <div  class="inputs">
              <input  id="countryCode" v-model="isChinese"  :class="['container',{'classNameStyle1': classNameStyle1}]"  @focus="change1" @blur="blurChange1">
              <input  id="phoneNumber" maxlength="11" v-model.number="phoneNumber" :placeholder="placeholderPhone" @focus="change1" @blur="blurChange1">
            </div>
          </div>
          </div>
          <div  class="input-box"  v-show="!flag">
            <div  :class="['container',{'classNameStyle1': classNameStyle1}]">
               <svg-icon icon-class="mail"  :class="['svg-icon',{'classNameStyle1': classNameStyle1}]"></svg-icon>
              <div  class="inputs">
                <input  id="email" type="email" v-model="email"  @focus="change1" @blur="blurChange1" :placeholder="placeholderEmail">
              </div>
            </div>
          </div>
          <div  class="input-box">
            <div :class="['container',{'classNameStyle2': classNameStyle2}]">
              <svg-icon icon-class="lock" :class="['svg-icon',{'classNameStyle2': classNameStyle2}]" class="svg-icon"></svg-icon>
              <div  class="inputs">
                <input  id="password" v-model="password"  @focus="change2" @blur="blurChange2" type="password" :placeholder="placeholderPwd">
              </div>
            </div>
          </div>
        </div>
        <div  class="confirm">
          <button class="loginIn" @click="loginIn"> {{$t('login.login')}} </button>
          <button  disabled="disabled" class="loading" style="display: none;">
            <span></span>
            <span></span>
            <span></span>
          </button>
        </div>
        <div class="other-login">
          <a v-show="flag" @click="toggle">{{$t('login.loginWithEmail')}}</a>
          <a v-show="!flag" @click="toggle">{{$t('login.loginWithPhone')}}</a>
          <a @click="$router.push('/login/qr')" class="qrLogin">{{$t('login.loginQr')}}</a>
        </div>
      </div>
  </div>
</template>

<script>
import { message } from 'ant-design-vue';
// eslint-disable-next-line import/no-extraneous-dependencies
import store from 'storejs';
import { mapMutations } from '../../../store/index';

export default {
  name: 'PlaymusicAccount',
  data() {
    return {
      flag: false,
      placeholderPhone: this.$t('login.phone'),
      placeholderPwd: this.$t('login.password'),
      placeholderEmail: this.$t('login.loginWithEmail'),
      classNameStyle1: '',
      classNameStyle2: '',
      phoneNumber: '',
      password: '',
      email: '',
      isChinese: '+86',
    };
  },
  methods: {
    ...mapMutations(['changeUserAvatar']),
    toggle() {
      this.flag = !this.flag;
    },
    change1() {
      if (this.flag) {
        this.placeholderPhone = '';
      } else {
        this.placeholderEmail = '';
      }
      this.classNameStyle1 = true;
    },
    change2() {
      this.placeholderPwd = '';
      this.classNameStyle2 = true;
    },
    blurChange1() {
      if (this.flag) {
        this.placeholderPhone = '手机号';
      } else {
        this.placeholderEmail = '邮箱';
      }
      this.classNameStyle1 = false;
    },
    blurChange2() {
      this.classNameStyle2 = false;
      this.placeholderPwd = '密码';
    },
    loginIn() {
      if ((this.phoneNumber || this.email) && this.password) {
        const regPhone = /^1[35789]\d{9}$/;
        const regEmail = /^[A-Za-z]\w{5,17}@(vip\.(126|163|188)\.com|163\.com|126\.com|yeach\.net)/;
        if (regPhone.test(this.phoneNumber) || regEmail.test(this.email)) {
          let params;
          if (this.flag) {
            params = {
              countrycode: 86,
              phone: this.phoneNumber,
              password: this.password,
              md5_password: this.$md5(this.password),
            };
          } else {
            params = {
              email: this.email,
              password: this.password,
              md5_password: this.$md5(this.password),
            };
          }
          let type;
          if (this.flag) {
            type = 'loginPhone';
          } else {
            type = 'loginEmail';
          }
          // eslint-disable-next-line no-console
          this[`$${type}`](params).then((res) => {
            if (res.data.code === 200) {
              store.set('user', res.data);
              this.changeUserAvatar(store.get('user').profile.avatarUrl);
              this.$router.push({ name: this.$route.params.originRouteName });
            } else {
              // eslint-disable-next-line no-alert
              message.error(res.data.msg);
            }
          }).catch((err) => {
            message.error(err);
          });
        } else if (this.flag) {
          message.warning('国家区号或手机号不正确');
        } else {
          message.warning('邮箱不正确');
        }
      } else if (this.flag) {
        message.warning('国家区号或手机号不正确');
      } else {
        message.warning('邮箱不正确');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.qrLogin{
  margin-left: 20px;
}
.login{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 192px);
}
.section-1{
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}
.title{
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 48px;
    color: var(--color-text);
}
.section-2{
    display: flex;
    align-items: center;
    flex-direction: column;
}
.other-login{
    margin-top: 24px;
}
.section-1 img{
    height: 64px;
    margin: 20px;
}
.input-box{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
    color: var(--color-text);
}
.input-box .container{
    display: flex;
    align-items: center;
    height: 46px;
    background: var(--color-secondary-bg);
    border-radius: 8px;
    width: 300px;
}
.input-box .svg-icon{
    height: 18px;
    width: 18px;
    color: #aaa;
    margin-left: 12px;
    margin-right: 6px;
}
.input-box .inputs{
    display: flex;
    width: 85%;
}
.svg-icon{
    fill: currentColor;
}
.confirm button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    background-color: var(--color-primary-bg);
    color: var(--color-primary);
    border-radius: 8px;
    margin-top: 24px;
    transition: .2s;
    padding: 8px;
    width: 100%;
    width: 300px;
}
.input-box input{
    outline: none;
    font-size: 20px;
    border: none;
    background: transparent;
    width: 100%;
    font-weight: 600;
    margin-top: -1px;
    color: var(--color-text);
}
button.loading{
    height: 44px;
    cursor: unset;
}
button {
    background: none;
    border: none;
}
.loading span{
    width: 6px;
    height: 6px;
    background-color: var(--color-primary);
    border-radius: 50%;
    margin: 0 2px;
    -webkit-animation: loading-data-v-7ba86478 1.4s infinite both;
    animation: loading-data-v-7ba86478 1.4s infinite both;
}
.loading span:nth-child(2) {
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
}
.loading span[data-v-7ba86478] {
    width: 6px;
    height: 6px;
    background-color: var(--color-primary);
    border-radius: 50%;
    margin: 0 2px;
    animation: loading-data-v-7ba86478 1.4s infinite both;
}
.loading span:nth-child(3) {
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
}
.other-login a{
    cursor: pointer;
    font-size: 13px;
    color: var(--color-text);
    opacity: .68;
}
.loginIn:hover{
  transform: scale(1.1);
}
.input-box input#phoneNumber{
    width:200px;
}
.input-box input#countryCode{
    width:54px;
}
.classNameStyle1{
  background:#eaeffd!important;
  color:#335eea!important;
}
.classNameStyle2{
  background:#eaeffd!important;
  color:#335eea!important;
}
</style>
